<template>
	<view>
		<!-- 撑开空间，防止最后一行的下边框无法显示 -->
		<view class="boxAndTop" :style="{height:stretchBarHeight+'px'}"></view>
		<view class="cu-bar fixed" :class="headTabbarColor" :style="{height:navBarHeight+'px'}">
			<view class="action" @click="Back" :style="{'margin-top':titleBarHeight+'px'}">
				<text class="cuIcon-back text-white"></text> 返回
			</view>
			<view class="content" :style="{'margin-top':titleBarHeight+'px'}">
				【{{strategy_name}}】{{exchange_name}}
			</view>
		</view>
		<view class="radius light bg-red"> 由于海外服务器流量问题, 请勿频繁开/关页面.</view>
	</view>
</template>  

<script>  
    export default {
		name:"detailsTabbar",
		props: {
			vcolor: '',
			strategy_name: '',
			exchange_name: '',
			exchange_url: ''
		},
		data() {
			return {
				headTabbarColor: '',
				stretchBarHeight: 60,
				navBarHeight: 0,
				titleBarHeight: 20,
			}
		},
		watch: {
			vcolor: {
				handler(newVal, oldVal) {
					this.headTabbarColor = `bg-${newVal}`
		        },
				immediate: true,
				deep: true
		    }
		},
		created() {
			
			// h5 app mp-alipay
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			// 获取微信小程序胶囊的位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			console.log('获取微信小程序胶囊的位置', menuButtonInfo)
		
			this.stretchBarHeight = menuButtonInfo.bottom
			this.navBarHeight = menuButtonInfo.bottom
			this.titleBarHeight = menuButtonInfo.top
			// #endif
		},
        methods: {
			Back(){
				uni.redirectTo({
					url:"/pages/home/home"
				})
			}
        }  
    }  
</script>
